<style lang="scss" scoped>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 50rpx;
	}

	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #dee2ee;
		background-color: white;
		z-index: 999;
	}

	.top {
		padding: 20rpx 30rpx;
	}

	.box {
		width: 690rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2;
		margin-top: 30rpx;
		line-height: 60rpx;
		position: relative;

		.line {
			width: 100%;

			.f28 {
				width: 50%;
			}
		}

		.line2 {
			width: 100%;
			border-top: 1px solid #eeeeee;
			align-items: flex-start;

			.des {
				width: 520rpx;
				text-align: justify;
			}
		}

		.sbtn {
			width: 184rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}

		.imgboxs {
			width: 100%;
			flex-wrap: wrap;

			.imgbox {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #dee2ee;
				border-radius: 10rpx;
				position: relative;
				margin-right: 18rpx;

				.photo {
					width: 100%;
					height: 100%;

				}

				.close {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: -16rpx;
					top: -16rpx;
				}
			}

			.imgbox:nth-child(4n) {

				margin-right: 0rpx;
			}
		}
	}

	.lbtn {
		margin: 60rpx auto;
	}

	.h1 {
		border-left: 6rpx solid #409eff;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		transform: translateX(-20rpx);
		height: 40rpx;
		line-height: 40rpx;
	}

	.tip {
		width: 140rpx;
	}

	.clock {
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.paybtn {
		width: 128rpx;
		height: 64rpx;
		border: 2rpx solid #409eff;
		border-radius: 34rpx;
		font-size: 28rpx;
		position: absolute;
		right: 20rpx;
		bottom: 30rpx;
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;

		.btn {
			width: 690rpx;
			height: 88rpx;
			opacity: 1;
			background: #ffffff;
			border: 2rpx solid #409eff;
			border-radius: 46rpx;
			margin: 30rpx;
		}
	}
</style>

<template>
	<view class="content">
		<view class="nav bgwhite" id="nav">
			<u-tabs :list="nav" :is-scroll="false" bar-width="60" bar-height="4" :current="current" @change="change">
			</u-tabs>
		</view>
		<view :style="'height:'+navheight+'px;'"></view>
		<view v-if="current==0">
			<view class="box ">
				<view class="f28 h1 bold textColor">基本信息</view>
				<u-line></u-line>
				<view class="gray align-flex ">
					<view class="tip">合同名称</view>
					<view class="textColor ">{{info.name}}</view>
				</view>
				<view class="gray  align-flex ">
					<view class="tip">合同金额</view>
					<view class="textColor ">￥{{info.contractPrice | price}}</view>
				</view>
				<view class="line between-flex">
					<view class="f28 align-flex">
						<view class="gray tip">已付金额</view>
						<view class="textColor">￥{{info.paidPrice | price}}</view>
					</view>
					<!-- <view class="f28 align-flex">
						<view class="gray tip">待付金额</view>
						<view class="textColor">￥{{info.unpaidPrice | price}}</view>
					</view> -->
				</view>
				<view class="line between-flex">
					<view class="f28 align-flex">
						<view class="gray tip">已开发票</view>
						<view class="textColor">￥{{info.paidReceiptPrice | price}}</view>
					</view>
					<view class="f28 align-flex">
						<view class="gray tip">未开发票</view>
						<view class="textColor">￥{{info.unpaidReceiptPrice | price}}</view>
					</view>
				</view>
				<view class="gray align-flex ">
					<view class="tip">甲方单位</view>
					<view class="textColor ">{{info.companyaId | company}}</view>
				</view>
				<view class="gray align-flex ">
					<view class="tip">乙方单位</view>
					<view class="textColor ">{{info.companybId | company}}</view>
				</view>
				<view class="gray align-flex " v-if="info.companycId">
					<view class="tip">丙方单位</view>
					<view class="textColor ">{{info.companycId | company}}</view>
				</view>
				<view class="line between-flex">
					<view class="f28 align-flex" v-if="info.qaDate">
						<view class="gray tip">质保期</view>
						<view class="textColor">{{info.qaDate}}</view>
					</view>
					<view class="f28 align-flex" v-if="info.qaGiveDate">
						<view class="gray tip">赠送维保</view>
						<view class="textColor">{{info.qaGiveDate}}</view>
					</view>
				</view>
				<view class="gray align-flex " v-if="info.qaMoney">
					<view class="tip">有偿维保</view>
					<view class="textColor ">{{info.qaMoney}}元/年</view>
				</view>
				<view class="flex" v-if="info.attachment"><span class="c999 tip">附件:</span>
					<view>
						<view class="align-flex blue p-left10" v-for="item2,index2 in info.attachment"
							@click="$open(item2.url)" :key="index2">
							<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
							{{item2.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="f32 bold textColor">付款信息</view>
			</view>
			<view class="box" v-for="item,index in payPlanList" :key="index">
				<view class="between-flex m-bottom20">
					<view :style="{color:paystate[item.payState-1].color}">{{paystate[item.payState-1].name}}</view>
					<view class="clock align-flex blue f24" @click="order=item;order.index=index;showHistory=true">
						<image src="../../static/images/clock.png" mode=""></image>
						付款历史
					</view>
				</view>
				<u-line></u-line>
				<view class="bold textColor f34 m-top20">分期{{index+1}}</view>
				<view class="gray  align-flex">
					<view class="m-right30">付款说明</view>
					<view class="textColor ">{{item.explan}}</view>
				</view>
				<view class="gray  align-flex">
					<view class="m-right30">计划付款日期</view>
					<view class="textColor ">{{item.payPlanDate}}</view>
				</view>
				<view class="gray  align-flex">
					<view class="m-right30">应付</view>
					<view class="textColor ">￥{{item.payablePrice | price}}</view>
				</view>
				<view class="gray  align-flex">
					<view class="m-right30">已付</view>
					<view class="textColor ">￥{{item.paidPrice | price}}</view>
				</view>
				<view class="gray  align-flex">
					<view class="m-right30">已付款比例</view>
					<view class="textColor ">{{((item.paidPrice/item.payablePrice)*100).toFixed(2)}}%</view>
				</view>

				<view class="paybtn center-flex blue" @click="order=item;order.index=index;showPay=true"
					v-if="item.payState!=3">
					付款
				</view>
			</view>

		</view>
		<view v-if="current==1">
			<view class="box" v-for="item,index in fapiaolist" :key="index">
				<view class="between-flex m-bottom10 f28">
					<view class="textColor bold">{{receiptTypeArr[item.receiptType-1].name }}</view>
					<view class="gray">已开比例: {{((item.receiptPrice/info.contractPrice)*100).toFixed(2)}}%</view>
				</view>
				<u-line></u-line>
				<view class="gray  align-flex">
					<view class="m-right30">发票编号</view>
					<view class="textColor ">{{item.receiptNo}}</view>
				</view>
				<view class="gray  align-flex">
					<view class="m-right30">发票金额 </view>
					<view class="textColor ">￥{{item.receiptPrice  | price}}</view>
				</view>
				<view class="line between-flex">
					<view class="f28 align-flex">
						<view class="gray tip">接收人</view>
						<view class="textColor">{{item.reveiveUserId | user}}</view>
					</view>
					<view class="f28 align-flex">
						<view class="gray tip">接收日期</view>
						<view class="textColor">{{item.receiveDate}}</view>
					</view>
				</view>

			</view>
			<view v-if="empty" style="position: fixed;top:40%;left:50%;transform: translateX(-50%);">
				<u-empty text="暂无发票"></u-empty>

			</view>
			<view class="space"></view>
			<view class="footer between-flex paddingBottom">
				<view class="btn center-flex blue f32 bold" @click="showKaipiao=true">开票 </view>
			</view>
		</view>
		<u-popup mode="bottom" v-model="showPay" :closeable="true" borderRadius="20">
			<pay v-if="showPay" :companyId="info.companyaId" :item="order" @submit="showPay=false;getInfo()"></pay>
		</u-popup>
		<u-popup mode="bottom" v-model="showHistory" :closeable="true" borderRadius="20">
			<history v-if="showHistory" :order="order"></history>
		</u-popup>
		<u-popup mode="bottom" v-model="showKaipiao" :closeable="true" borderRadius="20" height="90%">
			<kaipiao :info="info" v-if="showKaipiao" :contractId="id" :companyId="info.companybId" @submit="showKaipiao=false;getInfo()"></kaipiao>
		</u-popup>
	</view>
</template>

<script>
	import pay from '@/pages/fapiao/operation/pay.vue'
	import history from '@/pages/fapiao/operation/history.vue'
	import kaipiao from '@/pages/fapiao/operation/kaipiao.vue'
	export default {
		components: {
			pay,
			history,
			kaipiao
		},
		data() {
			return {
				head: this.$head,
				navheight: 0,
				nav: [{
						name: '合同'
					}, {
						name: '发票'

					}

				],
				current: 1,
				showPay: false,
				showHistory: false,
				showKaipiao: false,
				id: 0,
				info: {},
				payPlanList: [],
				paystate: [

					{
						name: '未付',
						color: '#F56C6C'
					},
					{
						name: '部分已付',
						color: '#EBB917'
					},
					{
						name: '全部已付',
						color: '#07C160'
					}
				],
				fapiaostate: [{
						name: '未开',
						color: '#F56C6C'
					},
					{
						name: '部分已开',
						color: '#EBB917'
					},

					{
						name: '全部已开',
						color: '#07C160'
					}
				],
				order: {},
				fapiaolist: [], //发票列表
				empty: false,
				receiptTypeArr: [{
						id: 1,
						name: '增值税专用发票'
					},
					{
						id: 2,
						name: '普通发票'
					},
					{
						id: 3,
						name: '专业发票'
					}
				]
			}
		},
		onLoad(e) {
			this.$nextTick(() => {
				let info = uni.createSelectorQuery().select("#nav");
				info.boundingClientRect((data) => {

					this.navheight = data.height

					console.log(this.navheight)
				}).exec()

			})
			this.id = e.id

			this.getInfo()

		},
		methods: {

			getInfo() {
				this.$pop.ajaxPost('/contract/details', {
					id: this.id
				}).then(res => {
					this.info = res.body
					if (this.info.attachment) {
						this.info.attachment = JSON.parse(this.info.attachment)
					}
					this.payPlanList = res.body.payPlanList
				})
				this.$pop.ajaxPost('/contract/receipt/list', {
					contractId: this.id
				}).then(res => {
					var list = res.body
					if (list.length == 0) {
						this.empty = true
					} else {
						this.empty = false
					}
					this.fapiaolist = list
				})
			},
			change(index) {
				this.current = index;

			},

		}
	}
</script>
